<template>
  <div ref="mainCon" class="container">
    <!-- 企业详情 -->
    <div class="outerBox">
      <div v-if="!hiddleToolBar" class="titleBox clearfix">
        <div class="fl">
          <span class="blockTitle">
            <i class="icon iconfont iconfanhui1" @click="goBack"></i>
            指挥中心配置
          </span>
          <p>根据实际情况对指挥中心部分页面进行调整</p>
        </div>
      </div>
    </div>

    <div class="mainCon">
      <el-row class="toolbar searchInputWidth" style="padding-bottom: 0">
        <el-form :inline="true" :model="filterField" ref="searchConditions">
          <el-col :lg="8" :xl="6">
            <el-form-item label="项目名称" class="row-padding-bottom">
              <el-input
                v-model="filterField.projectName"
                placeholder="输入项目名称"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xl="6">
            <el-form-item label="区域" class="row-padding-bottom">
              <el-cascader
                ref="manageArea"
                v-model="areaId"
                :append-to-body="false"
                :options="areasOptions"
                @change="getAreaId"
                clearable
                filterable
                :props="{ checkStrictly: true }"
              ></el-cascader>
            </el-form-item>
          </el-col>
          <el-form-item>
            <el-button
              type="primary"
              icon="icon iconfont iconchazhao1"
              @click="searchList"
              class="searchBtn"
            >
              <span>搜索</span>
            </el-button>
            <el-button
              class="commonBut saveBtn funComBut outEmployee"
              v-sdc
              @click="updateTitle"
            >
              <span class="opetareText">修改指挥中心标题</span>
            </el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <div class="spacing"></div>
      <div
        ref="tableBox"
        :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
      >
        <el-table
          ref="tableBox1"
          :max-height="tableHeight"
          :data="tableList"
          v-loading="loading"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          style="border: 1px solid #dfe6ec"
        >
          <el-table-column
            prop="subcategory"
            label="权重"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column label="项目名称" width="230">
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.projectName"
                :columnName="'projectName'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            prop="value"
            label="展示配置"
            align="center"
            :formatter="formatTd"
          >
            <template slot-scope="scope">
              {{ scope.row.value == '1' ? '展示' : '不展示' }}
            </template>
          </el-table-column>
          <el-table-column
            prop="remark"
            label="默认云台"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column label="操作" align="left" :formatter="formatTd">
            <template slot-scope="scope">
              <el-link
                type="primary"
                @click="openUpdateDia(scope.$index, scope.row)"
                >修改</el-link
              >
            </template>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关信息"></emptyTable>
          </div>
        </el-table>
        <!-- filterField为搜索条件 -->
        <!-- getTableList为获取子组件的数据 -->
        <Pagination
          ref="pagination"
          @getList="getTableList"
          :filterField="filterField"
          :requestUrl="requestUrl"
        ></Pagination>
        <el-dialog
          title="修改"
          :visible.sync="formVisible"
          :close-on-click-modal="false"
          @close="cancel('formData')"
          custom-class="brand-dialog-min-width"
          width="550px"
          :modal-append-to-body="false"
          :append-to-body="true"
        >
          <el-form :model="formData" :rules="formRules" ref="formData">
            <el-form-item label="项目名称" :label-width="formLabelCardWidth">
              {{ formData.projectName }}
            </el-form-item>
            <el-form-item
              label="是否展示"
              :label-width="formLabelCardWidth"
              prop="value"
            >
              <el-select
                v-model="formData.value"
                placeholder="请选择"
                class="optionWidth"
                clearable
                filterable
                :disabled="formData.projectTotal > 0"
              >
                <el-option
                  v-for="(item, index) of statusOption"
                  :key="index"
                  :label="item.name"
                  :value="item.code"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="默认云台"
              :label-width="formLabelCardWidth"
              prop="remark"
              clearable
            >
              <el-input
                v-model="formData.remark"
                autocomplete="off"
                placeholder="请输入"
                class="inputWidth"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="权重"
              :label-width="formLabelCardWidth"
              prop="subcategory"
              clearable
            >
              <el-input
                v-model="formData.subcategory"
                autocomplete="off"
                placeholder="请输入"
                style="width: 35%"
              ></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click.native="cancel('formData')" class="cancel"
              >取消</el-button
            >
            <el-button
              type="primary"
              @click.native="saveInfo('formData')"
              class="save"
              v-sdc
              :loading="canLogin"
              >保存</el-button
            >
          </div>
        </el-dialog>
        <el-dialog
          title="修改指挥中心标题"
          :visible.sync="formVisibleHome"
          :close-on-click-modal="false"
          @close="cancelHome('formDataHome')"
          custom-class="brand-dialog-min-width"
          width="550px"
          :modal-append-to-body="false"
          :append-to-body="true"
        >
          <el-form
            :model="formDataHome"
            :rules="formRulesHome"
            ref="formDataHome"
          >
            <el-form-item
              label="标题"
              :label-width="formLabelCardWidth"
              prop="headLine"
            >
              <el-input
                v-model="formDataHome.headLine"
                autocomplete="off"
                placeholder="请输入"
                class="inputWidth"
                clearable
              ></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click.native="cancelHome('formDataHome')" class="cancel"
              >取消</el-button
            >
            <el-button
              type="primary"
              @click.native="saveTitle('formDataHome')"
              class="save"
              v-sdc
              :loading="canLoginHome"
              >保存</el-button
            >
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import scrollTable from '@/mixin/scrollTable.js'
import { mapState, mapActions } from 'vuex'
export default {
  name: 'commandCenterConfig',
  mixins: [scrollTable],
  data() {
    var validatorWeight = (rule, value, callback) => {
      if (!value) {
        callback(new Error('权重不能为空'))
      }
      if (!new RegExp('^[1-9][0-9]*$').test(value)) {
        callback(new Error('请输入正整数'))
      }
      if (value.length > 4) {
        callback(new Error('输入4位数以内的正整数'))
      } else {
        callback()
      }
    }
    return {
      //表格数据
      tableList: [],
      requestUrl: 'api-r/ezrightbackpay/expand/getCloudList',
      areaId: '', //区域
      //搜索条件
      filterField: {
        projectName: '', //项目名称
        areaId: '', //区域
      },
      isShow: false, //列表加载
      loading: true,
      formData: {
        projectName: '',
        value: '',
        remark: '',
        subcategory: '',
      },
      formRules: {
        value: [
          {
            required: true,
            message: '请选择',
            trigger: 'change',
          },
        ],
        remark: [
          {
            required: true,
            message: '请输入默认云台',
            trigger: 'blur',
          },
        ],
        subcategory: [
          { required: true, validator: validatorWeight, trigger: 'blur' },
        ],
      },
      statusOption: [
        { code: '1', name: '展示' },
        { code: '2', name: '不展示' },
      ],
      formLabelCardWidth: '125px',
      formVisible: false,
      canLogin: false,
      formDataHome: {
        headLine: '',
      },
      formRulesHome: {
        headLine: [
          {
            required: true,
            message: '请输入标题',
            trigger: 'blur',
          },
        ],
      },
      formVisibleHome: false,
      canLoginHome: false,
    }
  },
  created() {
    if (this.$route.params.projectName) {
      this.filterField.projectName = this.$route.params.projectName
    }
    this.getAreas({ areaId: this.$store.state.areaInfoArr.areaId })
    const { uscc, companyName } = this.$route.query
    this.filterField.pbUscc = uscc
    this.querys = { uscc, companyName }
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
      this.getScreenTitle()
    })
  },
  computed: {
    ...mapState(['areasOptions']),
  },
  methods: {
    /**
     * @description: 获取标题
     */
    getScreenTitle() {
      this.axios({
        method: 'post',
        url: 'api-r/ezrightbackpay/expand/getHeadLine',
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              if (response.data.result.value) {
                this.formDataHome.headLine = response.data.result.value
              }
            } else {
              this.$message({
                message: response.data.errorMsg,
                type: 'error',
              })
            }
          },
          (response) => {
            this.$message({
              message: '数据请求失败',
              type: 'error',
            })
          }
        )
        .catch((error) => {})
    },
    ...mapActions(['getAreas']),
    //获取选中的区域最后一级id
    getAreaId() {
      var areaId = this.areaId[this.areaId.length - 1]
      this.filterField.areaId = areaId
    },
    getTableList(data) {
      this.tableList = data
      this.loading = false
      if (this.tableList.length < 1) {
        this.isShow = true
      }
    },
    // 搜索
    searchList() {
      this.$refs.pagination.getTableListData()
    },
    goBack() {
      this.$router.push({
        path: '/home/eZhoubigScreen/index',
      })
      this.$store.commit('GOBACK_NAME', {
        oldUrl: '/home/eZhoubigScreen/index',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    openUpdateDia(index, row) {
      this.formVisible = true
      Object.assign(this.formData, row)
    },
    saveInfo() {
      this.canLogin = true
      this.$refs['formData'].validate((valid) => {
        if (valid) {
          this.toUpdate()
        } else {
          this.canLogin = false
          return false
        }
      })
    },
    toUpdate() {
      this.axios({
        method: 'post',
        url: 'api-r/ezrightbackpay/expand/updateCloudConfig',
        data: {
          id: this.formData.id,
          value: this.formData.value,
          remark: this.formData.remark,
          subcategory: this.formData.subcategory,
        },
      })
        .then((response) => {
          this.canLogin = false
          if (!response.data.hasError) {
            this.$message({
              message: '修改成功',
              type: 'success',
            })
            this.formVisible = false
            this.$refs.pagination.getTableListData()
          } else {
            this.$message({
              message: response.data.errorMsg,
              type: 'error',
            })
          }
        })
        .catch((error) => {
          this.canLogin = false
        })
    },
    cancel() {
      this.$refs['formData'].resetFields()
      this.formVisible = false
    },
    updateTitle() {
      this.formVisibleHome = true
    },
    cancelHome() {
      this.$refs['formDataHome'].resetFields()
      this.formVisibleHome = false
    },
    saveTitle() {
      this.canLoginHome = true
      this.$refs['formDataHome'].validate((valid) => {
        if (valid) {
          this.toUpdateTitle()
        } else {
          this.canLoginHome = false
          return false
        }
      })
    },
    toUpdateTitle() {
      this.axios({
        method: 'post',
        url: 'api-r/ezrightbackpay/expand/updateHeadLine',
        data: {
          headLine: this.formDataHome.headLine,
        },
      })
        .then((response) => {
          this.canLoginHome = false
          if (!response.data.hasError) {
            this.$message({
              message: '修改成功',
              type: 'success',
            })
            this.formVisibleHome = false
            this.$refs.pagination.getTableListData()
          } else {
            this.$message({
              message: response.data.errorMsg,
              type: 'error',
            })
          }
        })
        .catch((error) => {
          this.canLoginHome = false
        })
    },
  },
}
</script>

<style lang="less" scoped>
.outerBox {
  padding: 0 24px;
}
.titleBox {
  background: #fff;
  padding: 12px 0px;
  border-bottom: 1px solid #e3e7e9;
  margin-bottom: 0;
  .blockTitle {
    font-weight: bold;
    font-size: 18px;
    color: #333;
    line-height: 40px;
    .iconfanhui1 {
      font-size: 20px;
      margin-right: 6px;
      cursor: pointer;
    }
  }
  p {
    padding-left: 30px;
  }
}
@import '../../../static/css/filterArea.less';
</style>
